<template>
  <div ref="container" class="auto-scale">
    <slot />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const container = ref(null)
const scale = ref(1)

const updateScale = () => {
  const baseWidth = 1920
  const baseHeight = 1080
  const width = container.value.offsetWidth
  const height = container.value.offsetHeight
  
  scale.value = Math.min(width / baseWidth, height / baseHeight)
}

onMounted(() => {
  updateScale()
  window.addEventListener('resize', updateScale)
})
</script>

<style scoped>
.auto-scale {
  transform: scale(v-bind(scale));
  transform-origin: 0 0;
  width: 1920px;
  height: 1080px;
}
</style> 